@import '../global/variables.css';
@import '../button/button.css';

.outerContainer {
  --ring-input-icon-offset: calc(var(--ring-unit) * 2.5);
  --ring-input-padding-inline: var(--ring-unit);
  --ring-input-background-color: var(--ring-content-background-color);
}

.borderless {
  /* stylelint-disable-next-line length-zero-no-unit */
  --ring-input-padding-inline: 0px;
}

.container {
  position: relative;

  box-sizing: border-box;

  font-size: var(--ring-font-size);
  line-height: var(--ring-line-height);

  & * {
    box-sizing: border-box;
  }
}

.input {
  --ring-input-padding-start: var(--ring-input-padding-inline);
  --ring-input-padding-end: var(--ring-input-padding-inline);

  width: 100%;

  margin: 0;
  padding-top: var(--ring-input-padding-block);
  padding-right: var(--ring-input-padding-end);
  padding-bottom: var(--ring-input-padding-block);
  padding-left: var(--ring-input-padding-start);

  transition: border-color var(--ring-ease);

  color: var(--ring-text-color);
  border: 1px solid var(--ring-borders-color);
  border-radius: var(--ring-border-radius);
  outline: none;
  background-color: var(--ring-input-background-color);

  font: inherit;

  caret-color: var(--ring-main-color);

  [dir='rtl'] & {
    padding-right: var(--ring-input-padding-start);
    padding-left: var(--ring-input-padding-end);
  }

  &:hover {
    transition: none;

    border-color: var(--ring-border-hover-color);
  }

  .error & {
    border-color: var(--ring-error-color);
  }

  &:focus {
    transition: none;

    border-color: var(--ring-main-color);
  }

  &[disabled] {
    color: var(--ring-disabled-color);
    border-color: var(--ring-border-disabled-color);
    background-color: var(--ring-disabled-background-color);

    -webkit-text-fill-color: var(--ring-disabled-color); /* Required for Safari, see RG-2063 for details */
  }

  /*
    Kill yellow/blue webkit autocomplete
    https://css-tricks.com/snippets/css/change-autocomplete-styles-webkit-browsers/
  */
  &:-webkit-autofill {
    &,
    &:hover,
    &:focus {
      transition: background-color 50000s ease-in-out 0s;
    }
  }
}

.borderless .input {
  border-color: transparent;
  background-color: transparent;
}

.withIcon .input {
  --ring-input-padding-start: calc(var(--ring-input-padding-inline) + var(--ring-input-icon-offset));
}

.clearable .input {
  --ring-input-padding-end: calc(var(--ring-input-padding-inline) + var(--ring-input-icon-offset));
}

.icon {
  position: absolute;
  top: calc(var(--ring-input-padding-block) + 1px);
  left: var(--ring-input-padding-inline);

  pointer-events: none;

  color: var(--ring-secondary-color);

  [dir='rtl'] & {
    right: var(--ring-unit);
    left: auto;
  }
}

.clear {
  position: absolute;
  top: calc(var(--ring-input-padding-block) + 3px);
  right: var(--ring-input-padding-inline);

  height: auto;

  padding-right: 0;

  line-height: inherit;

  .empty & {
    display: none;
  }

  [dir='rtl'] & {
    right: auto;
    left: var(--ring-unit);
  }
}

textarea.input {
  overflow: hidden;

  box-sizing: border-box;

  resize: none;
}

.input::placeholder {
  color: var(--ring-disabled-color);
}

.input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.errorText {
  margin-top: calc(var(--ring-unit) / 2);

  color: var(--ring-error-color);

  font-size: var(--ring-font-size-smaller);
  line-height: var(--ring-line-height-lowest);
}

.helpText {
  margin-top: calc(var(--ring-unit) / 2);
}

.sizeS {
  width: calc(var(--ring-unit) * 12);
}

.sizeM {
  width: calc(var(--ring-unit) * 30);
}

.sizeL {
  width: calc(var(--ring-unit) * 50);
}

.sizeFULL {
  width: 100%;
}

.heightS {
  --ring-input-padding-block: 1px;
}

.heightM {
  --ring-input-padding-block: 3px;
}

.heightL {
  --ring-input-padding-block: 5px;
}
